<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>世纪空间（ATExcel）</title>
	<!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
	<script src="atwebexcel.js"></script>
	<script src="atwebexcel-listenevent.js"></script>
	<script src="atwebexcel-operation.js"></script>
    <style type="text/css">
		body{
			margin : 0px;
        }
        #canvas{
            border: 1px solid black;
            display: block;
			margin : 0px;
        }

    </style>
</head>
<body> 
	<ul class="nav nav-tabs">
	  <li class="active"><a href="#tab1" data-toggle="tab">工作平台</a></li>
	  <li><a href="#tab2" data-toggle="tab">我的数据</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="tab1" style="padding:5px;">
			<div class="input-group" style="padding-top:2px;">
				<div class="btn-group" role="group" aria-label="...">
					<button type="button" class="btn btn-default" onclick="createWorkBook();" title="新建">
						<span class="fa fa-file-o"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="loadWorkbook();" title="导入">
						<span class="glyphicon glyphicon-log-in"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="saveWorkbook();" title="导出">
						<span class="glyphicon glyphicon-log-out"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="saveWorkbook();" title="保存">
						<span class="fa fa-save"></span>
					</button>
					<button id="mergecellbtn" type="button" class="btn btn-default" onclick="mergeCells();" title="合并单元格">
						<span class="fa fa-object-group"></span>
					</button>
					<button id="cancelmergecellbtn" type="button" class="btn btn-default" onclick="cancelMergeCells();" title="取消合并单元格">
						<span class="fa fa-object-ungroup"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="clearSelectedCells();" title="清除选中单元格">
						<span class="glyphicon glyphicon-trash"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="reloadWorkBook();" title="重新加载">
						<span class="glyphicon glyphicon-refresh"></span>
					</button>
				</div>
				
				
				<div class="btn-group" role="group" aria-label="..." style="padding-left:5px;">
					<button id="colascsortbtn1" type="button" class="btn btn-default" onclick="colSort('asc');" title="顺序">
						<span class="fa fa-sort-numeric-asc"></span>
					</button>
					<button id="coldescsortbtn1" type="button" class="btn btn-default" onclick="colSort('desc');" title="倒序">
						<span class="fa fa-sort-numeric-desc"></span>
					</button>
					<button id="colascsortbtn2" type="button" class="btn btn-default" onclick="colAlphaSort('asc');" title="顺序">
						<span class="fa fa-sort-alpha-asc"></span>
					</button>
					<button id="coldescsortbtn2" type="button" class="btn btn-default" onclick="colAlphaSort('desc');" title="倒序">
						<span class="fa fa-sort-alpha-desc"></span>
					</button>
				</div>
				<div class="btn-group" role="group" aria-label="行列操作" style="padding-left:5px;">
					<button id="addrowbtn" name="rowopt" type="button" class="btn btn-default" onclick="addRow();" title="增加行">
						<span class="fa fa-plus"></span>
					</button>
					<button id="removerowbtn" name="rowopt" type="button" class="btn btn-default" onclick="removeRow();" title="删除行">
						<span class="fa fa-minus"></span>
					</button>
					<button id="addcolbtn" name="colopt" type="button" class="btn btn-default" onclick="addCol();" title="增加列">
						<span class="fa fa-plus"></span>
					</button>
					<button id="removecolbtn" name="colopt" type="button" class="btn btn-default" onclick="removeCol();" title="删除列">
						<span class="fa fa-minus"></span>
					</button>
					<button id="addrowbtn" name="rowopt" type="button" class="btn btn-default" onclick="moveRow('up');" title="上移行">
						<span class="fa fa-long-arrow-up"></span>
					</button>
					<button id="removerowbtn" name="rowopt" type="button" class="btn btn-default" onclick="moveRow('down');" title="下移行">
						<span class="fa fa-long-arrow-down"></span>
					</button>
					<button id="addcolbtn" name="colopt" type="button" class="btn btn-default" onclick="moveCol('left');" title="左移列">
						<span class="fa fa-long-arrow-left"></span>
					</button>
					<button id="removecolbtn" name="colopt" type="button" class="btn btn-default" onclick="moveCol('right');" title="右移列">
						<span class="fa fa-long-arrow-right"></span>
					</button>
				</div>
				<div class="btn-group" role="group" aria-label="数值计算" style="padding-left:5px;">
					<button type="button" class="btn btn-default" onclick="calculateCellTotal();" title="计算求和">
						<span class="fa fa-eur"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="calculateCellAve();" title="计算平均">
						<span class="glyphicon glyphicon-glass"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="calculateCellCount();" title="计数">
						<span class="fa fa-usd"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="calculateCellMax();" title="最大值">
						<span class="fa fa-cny"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="calculateCellMin();" title="最小值">
						<span class="fa fa-gg"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="" title="计算平方">
						<span class="fa fa-superscript"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="" title="计算开方">
						<span class="fa fa-subscript"></span>
					</button>
				</div>
				<div class="btn-group" role="group" aria-label="图表" style="padding-left:5px;">
					<button name="createchart" type="button" class="btn btn-default" onclick="createChart('bar');" title="生成柱图">
						<span class="fa fa-bar-chart"></span>
					</button>
					<button name="createchart" type="button" class="btn btn-default" onclick="createChart('line');" title="生成线性图">
						<span class="fa fa-line-chart"></span>
					</button>
					<button name="createchart" type="button" class="btn btn-default" onclick="createChart('pie');" title="生成饼图">
						<span class="fa fa-pie-chart"></span>
					</button>
					<button name="createchart" type="button" class="btn btn-default" onclick="createChart('area');" title="生成堆积图">
						<span class="fa fa-area-chart"></span>
					</button>
					<button id="insertImagebtn" type="button" class="btn btn-default" onclick="insertImage();" title="插入图片">
						<span class="fa fa-photo"></span>
					</button>
					<button type="button" class="btn btn-default" onclick="" title="插入地图">
						<span class="fa fa-map"></span>
					</button>
				</div>
			</div>
			<div class="input-group" style="padding-top:2px;">
				<div class="btn-group" role="group" aria-label="..." style="">
					<button id="copybtn" name="cellccp" type="button" class="btn btn-default" onclick="copycells();" title="复制">
						<span class="fa fa-copy"></span>
					</button>
					<button id="cutbtn" name="cellccp" type="button" class="btn btn-default" onclick="cutcells();" title="剪切">
						<span class="fa fa-cut"></span>
					</button>
					<button id="pastebtn" name="cellccp" type="button" class="btn btn-default" onclick="pastecells();" title="粘贴">
						<span class="fa fa-paste"></span>
					</button>
				</div>
				<div class="btn-group" role="group" aria-label="..." style="padding-left:5px;">
					<button id="fontweightbtn" name="setcellfontstyle" type="button" class="btn btn-default" onclick="setCellFont('font-weight');" title="加粗">
						<span class="glyphicon glyphicon-bold"></span>
					</button>
					<button name="setcellfontstyle" type="button" class="btn btn-default" onclick="setCellFont('font-style');" title="斜体">
						<span class="glyphicon glyphicon-italic"></span>
					</button>
					<button name="setcellfontstyle" type="button" class="btn btn-default" onclick="" title="下划线">
						<span class="fa fa-underline"></span>
					</button>
					<button name="setcellfontstyle" type="button" class="btn btn-default" onclick="" title="字体颜色">
						<span class="glyphicon glyphicon-text-color"></span>
					</button>
					<button name="setcellfontstyle" type="button" class="btn btn-default" onclick="" title="背景颜色">
						<span class="glyphicon glyphicon-text-background"></span>
					</button>
				</div>
				<div class="btn-group" role="group" aria-label="..." style="padding-left:5px;">
					<button name="setcellalign" type="button" class="btn btn-default" onclick="setCellAlign('left');" title="左对齐">
						<span class="glyphicon glyphicon-align-left"></span>
					</button>
					<button name="setcellalign" type="button" class="btn btn-default" onclick="setCellAlign('center');" title="居中对齐">
						<span class="glyphicon glyphicon-align-center"></span>
					</button>
					<button name="setcellalign" type="button" class="btn btn-default" onclick="setCellAlign('right');" title="右对齐">
						<span class="glyphicon glyphicon-align-right"></span>
					</button>
					<button name="setcellalign" type="button" class="btn btn-default" onclick="setCellVAlign('top');" title="上对齐">
						<span class="fa fa-align-justify"></span>
					</button>
					<button name="setcellalign" type="button" class="btn btn-default" onclick="setCellVAlign('middle');" title="居中对齐">
						<span class="fa fa-align-justify"></span>
					</button>
					<button name="setcellalign" type="button" class="btn btn-default" onclick="setCellVAlign('bottom');" title="下对齐">
						<span class="fa fa-align-justify"></span>
					</button>
					<button name="setcellfontstyle" type="button" class="btn btn-default" onclick="" title="缩进">
						<span class="fa fa-indent"></span>
					</button>
					<button name="setcellfontstyle" type="button" class="btn btn-default" onclick="" title="缩进">
						<span class="fa fa-outdent"></span>
					</button>
					<button name="setcellfontstyle" type="button" class="btn btn-default active" onclick="" title="格式刷">
						<span class="fa fa-eraser"></span>
					</button>
				</div>
				<div class="btn-group form-inline" role="group" aria-label="..." style="padding-left:5px;">
					<select id="selFontFamily" name="setcellfontstyle" class="form-control" onchange="setCellFont('font-family');" style="width:110px;">
						  <option value="Arial">Arial</option>
						  <option value="微软雅黑" selected="selected">微软雅黑</option>
						  <option value="宋体">宋体</option>
						  <option value="黑体">黑体</option>
					</select>
					
					<select id="selFontSize" name="setcellfontstyle" class="form-control" onchange="setCellFont('font-size');" style="width:70px; float:left;">
						  <option value="12px">12</option>
						  <option value="14px" selected="selected">14</option>
						  <option value="16px">16</option>
						  <option value="20px">20</option>
					</select>
					<select id="celldatatype" name="setcellfontstyle" class="form-control" onchange="changeCellDatatype();" style="width:120px; float:left;">
						  <option value="text" selected="selected">文本</option>
						  <option value="number">数值</option>
						  <option value="date">日期</option>
						  <option value="datetime">日期时间</option>
						  <option value="image">图片</option>
						  <option value="map">地图</option>
					</select>
					<input type="text" class="form-control" id="cellinput" placeholder="单元格值" style="width:200px; float:left;">
					<select id="sample" class="form-control" onchange="changeSample();" style="width:120px; float:left;">
						  <option value="" selected="selected">我的模板</option>
						  <option value="sample1">模板1</option>
						  <option value="sample2">模板2</option>
						  <option value="sample3">模板3</option>
					</select>
				</div>
			</div>
			<div class="input-group" style="padding-top:2px;">
				
			</div>
		</div>
		<div class="tab-pane" id="tab2" style="padding:5px;">
			
		</div>
	</div>
	<div id="celledit" tabindex="-1" autocomplete="off" contenteditable="true" gcuielement="gcEditingInput" style="position: absolute; font-size:12px;width: 98px; height: 23px;line-height: 23px; border: 1px solid #00a0a0;display:none;"></div>
	<div style="width:1200px;height:350px;overflow:auto;">
		<canvas id="canvas" width="600" height="400"></canvas>
	</div>
	<div id="mouseinfo"></div>
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div>
				<div class="modal-body">
				<div id="echartsmain" style="width: 500px;height:300px;"></div>
				</div>
				<div class="modal-footer">
					echarts提供技术支持，感谢
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="imagemodalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4>选中图片</h4>
				</div>
				<div class="modal-body">
					<img id="selimage" style="width: 560px;height:250px;border:1px dashed #000;"/>
					<p>
					<input type="file" name="image_file" id="image_file" multiple class="file-loading btn-primary"/>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	
</body>
</html>